import { useState, useEffect, useRef } from 'react';
import { Button, Form, message, Input, Select, InputNumber, Checkbox } from 'antd';
import request from '@/utils/request';
import CateSelect from '@/components/CategoryComponent';
import { useIntl } from 'umi';

const apiURL = '/api/services/app/ERPReports/';

const ReportEditForm = (props: any) => {
  const [loading, setLoading] = useState(false);
  const [users, setUsers] = useState([]);
  const formRef = useRef<any>(null);
  const intl = useIntl();

  const onFinish = (values: any) => {
    const act = props.act ? props.act : 'Create';
    const method = act === 'Create' ? 'POST' : 'PUT';
    if (act === 'Create') {
      values.sqlDefine = '0';
      values.fielDefine = '[]';
    }
    if (Array.isArray(values.authUsers)) {
      values.authUsers = values.authUsers.join(',');
    }

    request(apiURL + act, {
      method,
      data: values,
    }).then((response) => {
      if (response) {
        if (response.success) {
          message.success(intl.formatMessage({id: 'pages.save.success'}));
          if (props.callback) {
            props.callback(response.result);
          }
        }
        setLoading(false);
      }
    });
  };

  useEffect(() => {
    const data = props.data;
    if (props.act === 'Update') {
      try {
        data.authUsers = data.authUsers.split(',');
      } catch {}
      formRef.current.setFieldsValue(data);
    }
    getUsers(data?.authUsers);
  }, [props.data, props.act]);

  const getUsers = (selectData: any) => {
    request('/api/services/app/User/GetLists', {
      method: 'GET',
      params: { maxResultCount: 500 },
    }).then((response) => {
      setUsers(response.result.items);
    });
  };

  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  };

  return (
    <>
      <Form {...layout} ref={formRef} onFinish={onFinish}>
        <Form.Item name="id" label="ID" hidden>
          <Input />
        </Form.Item>
        <Form.Item
          name="reportName"
          label={intl.formatMessage({id: 'pages.reportName'})}
          rules={[{ required: true, message: intl.formatMessage({id: 'pages.reportName.required'}) }]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="memo" label={intl.formatMessage({id: 'pages.reportMemo'})}>
          <Input />
        </Form.Item>
        <Form.Item
          name="rowKey"
          label={intl.formatMessage({id: 'pages.reportRowkey'})}
          rules={[{ required: true, message: intl.formatMessage({id: 'pages.reportRowkey.required'}) }]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="sqlDefine" label={intl.formatMessage({id: 'pages.sqlDefine'})} hidden>
          <Input.TextArea />
        </Form.Item>
        <Form.Item name="fielDefine" label={intl.formatMessage({id: 'pages.fielDefine'})} hidden>
          <Input />
        </Form.Item>
        <Form.Item label={intl.formatMessage({id: 'pages.authUsers'})} name="authUsers">
          <Select mode="multiple" placeholder={intl.formatMessage({id: 'pages.selectUsers'})} allowClear>
            {users.map((item: any) => {
              return (
                <Select.Option key={item.id} value={item.userName}>
                  {item.userName}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item name="orderBy" label={intl.formatMessage({id: 'pages.orderBy'})}>
          <Input />
        </Form.Item>
        <Form.Item name="reportTemplete" label={intl.formatMessage({id: 'pages.reportTemplete'})} hidden>
          <Input />
        </Form.Item>
        <CateSelect layout="ReportClass" width={200} name="classID" label={intl.formatMessage({id: 'pages.reportClass'})} />
        <CateSelect layout="ReportModular" width={200} name="modularName" label={intl.formatMessage({id: 'pages.modularName'})} />
        <CateSelect
          layout="ReportType"
          width={200}
          name="reportType"
          label={intl.formatMessage({id: 'pages.reportType'})}
          required={true}
        />
        <CateSelect
          layout="filterType"
          width={200}
          name="filterType"
          label={intl.formatMessage({id: 'pages.filterType'})}
          required={true}
        />
        <Form.Item name="reportHeight" label={intl.formatMessage({id: 'pages.reportHeight'})}>
          <InputNumber min={200} />
        </Form.Item>
        <Form.Item name="maxRow" label={intl.formatMessage({id: 'pages.maxRow'})}>
          <InputNumber min={1} />
        </Form.Item>
        <Form.Item label={intl.formatMessage({id: 'pages.otherAttributes'})}>
          <Input.Group compact>
            <Form.Item name="bordered" valuePropName="checked">
              <Checkbox>{intl.formatMessage({id: 'pages.bordered'})}</Checkbox>
            </Form.Item>
            <Form.Item name="hiddenExport" valuePropName="checked">
              <Checkbox>{intl.formatMessage({id: 'pages.hiddenExport'})}</Checkbox>
            </Form.Item>
          </Input.Group>
        </Form.Item>
        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 5 }}>
          <Button type="primary" htmlType="submit" loading={loading}>
            {props.act === 'Create' ? intl.formatMessage({id: 'pages.create'}) : intl.formatMessage({id: 'pages.save'})}
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default ReportEditForm;
